<template>
  <div class="content">
    <div id="book">
      <!-- <div class="book-cover one-page"></div> -->

      <div class="book-page one-page" v-for="item in imgList" :key="item.id" :style="{ background: `url(${item.url})`, 'background-size': '100% 100%' }"></div>
      <!-- <div class="book-page one-page"></div>
      <div class="book-page one-page"></div>
      <div class="book-page one-page"></div>
      <div class="book-page one-page"></div>
      <div class="book-page one-page"></div>
      <div class="book-page one-page"></div>
      <div class="book-page one-page"></div>
      <div class="book-page one-page"></div>
      <div class="book-page one-page"></div> -->

      <!-- <div class="book-cover one-page"></div> -->
    </div>
    <div id="control">
      <button @click="leftHandle">&lt;左边</button>
      <button @click="rightHandle">&gt;右边</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgList: [
        {
          url: require("../image/1.jpg"),
          id: 0,
        },
        {
          url: require("../image/2.jpg"),
          id: 1,
        },
        {
          url: require("../image/3.jpg"),
          id: 2,
        },
        {
          url: require("../image/4.jpg"),
          id: 3,
        },
        {
          url: require("../image/5.jpg"),
          id: 4,
        },
        {
          url: require("../image/6.jpg"),
          id: 5,
        },
        {
          url: require("../image/7.jpg"),
          id: 6,
        },
        {
          url: require("../image/8.jpg"),
          id: 7,
        },
        {
          url: require("../image/9.jpg"),
          id: 8,
        },
        {
          url: require("../image/10.jpg"),
          id: 9,
        },
      ],
      loadingList: [
        { url: require("../image/10.jpg"), id: 0 },
        { url: require("../image/9.jpg"), id: 0 },
        { url: require("../image/8.jpg"), id: 0 },
        { url: require("../image/10.jpg"), id: 0 },
        { url: require("../image/9.jpg"), id: 0 },
        { url: require("../image/8.jpg"), id: 0 },
        { url: require("../image/10.jpg"), id: 0 },
        { url: require("../image/9.jpg"), id: 0 },
        { url: require("../image/8.jpg"), id: 0 },
        { url: require("../image/20.png"), id: 0 },
      ],
      //  总页数
      total: 0,
      //  当前页
      inIndex: 0,
    };
  },
  methods: {
    init() {
      let pages = document.querySelectorAll(".book-page");
      // 封面页
      let cover = document.querySelectorAll(".book-cover");
      // 按钮
      let btn = document.querySelectorAll("#control button");
      let book = document.querySelector("#book");
      // 所有页
      let allPages = document.querySelectorAll(".one-page");
      for (let i = 0; i < pages.length; i++) {
        pages[i].style.zIndex = this.imgList.length - i - 1;
      }
      // cover[0].style.zIndex = this.imgList.length
      // cover[1].style.zIndex = 1;
    },
    rightHandle() {
      let pages = document.querySelectorAll(".book-page");
      // 封面页
      let cover = document.querySelectorAll(".book-cover");
      // 按钮
      let btn = document.querySelectorAll("#control button");
      //
      let book = document.querySelector("#book");
      // 所有页
      let allPages = document.querySelectorAll(".one-page");
      // console.log(pages);
      if (this.inIndex == 0) {
        allPages[this.inIndex].style.display = "none";
        allPages[this.inIndex + 1].style.transform = "rotateY(-180deg)";
      }
        this.inIndex +1
      if (this.inIndex != 0) {
        console.log("进来了，啊");
        allPages[this.inIndex + 1].style.display = "none";
        allPages[this.inIndex + 2].style.display = "none";
        allPages[this.inIndex + 3].style.transform = "rotateY(-180deg)";
      }
      // console.log(this.inIndex + 2)
      // allPages[this.inIndex++].style.zIndex = 1000 + this.inIndex++;
      // this.inIndex++;
      // if (this.imgList.length ==  this.inIndex) {
      //   // btn[1].style.backgroundColor = "rgba(110, 110, 110, 0.5)";
      //   // btn[1].style.color = "darkgray";
      //   // btn[1].disabled = true;
      //   book.style.transform = "translateX(300px)";
      // }
    },
    leftHandle() {
      let pages = document.querySelectorAll(".book-page");
      // 封面页
      let cover = document.querySelectorAll(".book-cover");
      // 按钮
      let btn = document.querySelectorAll("#control button");
      //
      let book = document.querySelector("#book");
      // 所有页
      let allPages = document.querySelectorAll(".one-page");
      console.log(pages, cover, btn, book, allPages);
      // 当前页
      this.inIndex--;
      if (this.imgList.length - 1 == this.inIndex) {
        allPages[this.inIndex].style.transform = "rotateY(0deg)";
        book.style.transform = "translateX(145px)";
      } else {
        allPages[this.inIndex].style.transform = "rotateY(0deg)";
      }
    },
  },
  mounted() {
    this.init();
  },
  components: {},
};
</script>

 <style lang='scss' scoped>
.content {
  #book {
    height: 240px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 1s;
    perspective: 1600px;
    transform-style: preserve-3d;
  }
  .book-cover {
    /* 封面比页面每条边宽25px */
    height: calc(240px + 50px);
    width: calc(240px + 50px);
    position: absolute;
    background-image: linear-gradient(to bottom, #ff5c33, #ff9166, #3dd6f5);
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    transition: 1s;
    transform-origin: left;
    backface-visibility: visible;
    border: 0.5px solid black;
  }
  .book-page {
    height: 240px;
    width: 240px;
    position: absolute;
    z-index: 100;
    transition: 1s;
    /* 封面比页面每条边宽的长度 */
    transform-origin: -25px;
    background-size: cover;
    backface-visibility: visible;
  }

  #control {
    margin-top: 60px;
    user-select: none;
  }
  #control button {
    // display: inline-block;
    // width: 45px;
    // height: 45px;
    // border: 0;
    // margin: 0px 15px;
    // color: #fff;
    // font-size: 20px;
    // font-weight: bold;
    // border-radius: 50%;
    // background-color: rgba(63, 63, 63, 0.8);
    // outline: none;
  }
}
</style>
